<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>提交开票</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segue UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-green-500 to-teal-500 px-4 py-3">
            <div class="flex items-center justify-between text-white">
                <a href="b2b-invoice.html" class="text-white">
                    <i class="fas fa-arrow-left text-lg"></i>
                </a>
                <h1 class="text-lg font-semibold">提交开票</h1>
                <button onclick="showHelp()" class="text-white hover:opacity-80">
                    <i class="fas fa-question-circle text-lg"></i>
                </button>
            </div>
        </div>

        <!-- Confirmation Banner -->
        <div class="bg-green-50 border-b border-green-200 px-4 py-3">
            <div class="flex items-center">
                <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3">
                    <i class="fas fa-check text-green-600"></i>
                </div>
                <div>
                    <p class="text-sm text-green-800 font-medium">信息核对完成</p>
                    <p class="text-xs text-green-700">请确认信息无误后提交开票申请</p>
                </div>
            </div>
        </div>

        <!-- Content -->
        <div class="h-[calc(852px-200px)] overflow-y-auto pb-24">
            <!-- Application Summary -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <i class="fas fa-clipboard-list text-green-600 mr-2"></i>
                    申请摘要
                </h3>
                
                <div class="bg-white rounded-xl border border-gray-200 p-4 shadow-sm">
                    <div class="grid grid-cols-2 gap-4 mb-4">
                        <div class="text-center">
                            <p class="text-xs text-gray-500 mb-1">申请编号</p>
                            <p class="text-sm font-mono font-medium" id="applicationId">INV202501050002</p>
                        </div>
                        <div class="text-center">
                            <p class="text-xs text-gray-500 mb-1">申请时间</p>
                            <p class="text-sm font-medium">2025-01-05 14:30</p>
                        </div>
                    </div>
                    
                    <div class="border-t border-gray-100 pt-3">
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-600">开票金额</span>
                            <span class="text-xl font-bold text-green-600" id="submitAmount">¥8,750.00</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Invoice Details Review -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <i class="fas fa-file-invoice text-blue-600 mr-2"></i>
                    发票信息确认
                </h3>
                
                <div class="bg-white rounded-xl border border-gray-200 shadow-sm">
                    <!-- Invoice Type -->
                    <div class="p-4 border-b border-gray-100">
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-600">发票类型</span>
                            <div class="flex items-center">
                                <span class="bg-purple-100 text-purple-700 text-xs px-2 py-1 rounded-full mr-2">专票</span>
                                <span class="text-sm font-medium" id="confirmInvoiceType">增值税专用发票</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Buyer Info -->
                    <div class="p-4 border-b border-gray-100">
                        <div class="space-y-2">
                            <div class="flex justify-between items-start">
                                <span class="text-sm text-gray-600">购买方</span>
                                <span class="text-sm font-medium text-right" id="confirmBuyerName">上海贸易公司</span>
                            </div>
                            <div class="flex justify-between items-start">
                                <span class="text-sm text-gray-600">税号</span>
                                <span class="text-xs font-mono text-right text-gray-700" id="confirmTaxId">91310000MA12345678</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Invoice Content -->
                    <div class="p-4">
                        <div class="flex justify-between items-start">
                            <span class="text-sm text-gray-600">开票内容</span>
                            <span class="text-sm text-right" id="confirmContent">电子商务平台技术服务费</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Processing Timeline -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <i class="fas fa-clock text-orange-600 mr-2"></i>
                    处理时间表
                </h3>
                
                <div class="bg-white rounded-xl border border-gray-200 p-4 shadow-sm">
                    <div class="space-y-3">
                        <div class="flex items-center">
                            <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-check text-green-600 text-sm"></i>
                            </div>
                            <div class="flex-1">
                                <p class="text-sm font-medium">提交申请</p>
                                <p class="text-xs text-gray-500">立即完成</p>
                            </div>
                        </div>
                        
                        <div class="flex items-center">
                            <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-search text-blue-600 text-sm"></i>
                            </div>
                            <div class="flex-1">
                                <p class="text-sm font-medium">信息审核</p>
                                <p class="text-xs text-gray-500">1-2小时</p>
                            </div>
                        </div>
                        
                        <div class="flex items-center">
                            <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-file-alt text-purple-600 text-sm"></i>
                            </div>
                            <div class="flex-1">
                                <p class="text-sm font-medium">开具发票</p>
                                <p class="text-xs text-gray-500">2-4小时</p>
                            </div>
                        </div>
                        
                        <div class="flex items-center">
                            <div class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-paper-plane text-gray-500 text-sm"></i>
                            </div>
                            <div class="flex-1">
                                <p class="text-sm font-medium">发送通知</p>
                                <p class="text-xs text-gray-500">开票完成后立即发送</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Important Notes -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <i class="fas fa-exclamation-triangle text-yellow-600 mr-2"></i>
                    重要提醒
                </h3>
                
                <div class="bg-yellow-50 rounded-xl border border-yellow-200 p-4">
                    <ul class="space-y-2 text-sm text-yellow-800">
                        <li class="flex items-start">
                            <i class="fas fa-dot-circle text-yellow-600 text-xs mt-2 mr-2 flex-shrink-0"></i>
                            <span>提交后无法修改发票信息，请仔细核对</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-dot-circle text-yellow-600 text-xs mt-2 mr-2 flex-shrink-0"></i>
                            <span>增值税专用发票需要完整的企业资质信息</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-dot-circle text-yellow-600 text-xs mt-2 mr-2 flex-shrink-0"></i>
                            <span>开票完成后将通过邮件和短信通知您</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-dot-circle text-yellow-600 text-xs mt-2 mr-2 flex-shrink-0"></i>
                            <span>如需加急处理，请联系客服（额外收费）</span>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- Contact Support -->
            <div class="p-4">
                <div class="bg-gray-50 rounded-xl border border-gray-200 p-4 text-center">
                    <p class="text-sm text-gray-600 mb-2">遇到问题？</p>
                    <button onclick="contactSupport()" class="text-green-600 text-sm font-medium hover:text-green-700">
                        <i class="fas fa-headset mr-1"></i>联系客服
                    </button>
                </div>
            </div>
        </div>

        <!-- Bottom Actions -->
        <div class="absolute bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4">
            <div class="flex gap-3">
                <button onclick="goBackToEdit()" class="flex-1 bg-gray-100 text-gray-700 py-3 rounded-lg font-medium hover:bg-gray-200 transition-colors">
                    <i class="fas fa-edit mr-2"></i>返回编辑
                </button>
                <button onclick="confirmSubmission()" class="flex-2 bg-gradient-to-r from-green-500 to-teal-500 text-white py-3 rounded-lg font-medium hover:opacity-90 transition-opacity shadow-lg px-6">
                    <i class="fas fa-paper-plane mr-2"></i>确认提交开票申请
                </button>
            </div>
        </div>
    </div>

    <!-- Loading Overlay -->
    <div id="loadingOverlay" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" style="display: none;">
        <div class="bg-white rounded-xl p-6 text-center max-w-xs mx-4">
            <div class="w-12 h-12 border-4 border-green-200 border-t-green-600 rounded-full animate-spin mx-auto mb-4"></div>
            <p class="text-sm font-medium text-gray-800 mb-2">正在提交申请...</p>
            <p class="text-xs text-gray-600">请勿关闭页面</p>
        </div>
    </div>

    <script>
        // Mock data for the current submission
        const submissionData = {
            applicationId: 'INV202501050002',
            invoiceType: 'vat',
            amount: '8750.00',
            buyerName: '上海贸易公司',
            taxId: '91310000MA12345678',
            content: '电子商务平台技术服务费',
            urgentProcess: false
        };

        // Initialize page
        document.addEventListener('DOMContentLoaded', function() {
            initializeSubmissionPage();
        });

        function initializeSubmissionPage() {
            // Load submission data (would normally come from previous page or API)
            const urlParams = new URLSearchParams(window.location.search);
            const invoiceId = urlParams.get('id');
            
            // Update UI with submission data
            document.getElementById('applicationId').textContent = submissionData.applicationId;
            document.getElementById('submitAmount').textContent = `¥${submissionData.amount}`;
            document.getElementById('confirmInvoiceType').textContent = 
                submissionData.invoiceType === 'vat' ? '增值税专用发票' : '普通发票';
            document.getElementById('confirmBuyerName').textContent = submissionData.buyerName;
            document.getElementById('confirmTaxId').textContent = submissionData.taxId;
            document.getElementById('confirmContent').textContent = submissionData.content;
            
            // Update invoice type badge
            const badge = document.querySelector('.bg-purple-100');
            if (submissionData.invoiceType === 'normal') {
                badge.className = 'bg-blue-100 text-blue-700 text-xs px-2 py-1 rounded-full mr-2';
                badge.textContent = '普票';
            }

            showToast('信息核对完成，请确认后提交');
        }

        function goBackToEdit() {
            // Go back to edit page with current data
            const invoiceId = submissionData.applicationId;
            window.location.href = `invoice-edit.html?id=${invoiceId}`;
        }

        function confirmSubmission() {
            // Show confirmation dialog
            const confirmMessage = `确认提交开票申请？\n\n申请编号: ${submissionData.applicationId}\n开票金额: ¥${submissionData.amount}\n购买方: ${submissionData.buyerName}\n\n提交后将无法修改，请确认信息准确无误。`;
            
            if (confirm(confirmMessage)) {
                submitInvoiceApplication();
            }
        }

        function submitInvoiceApplication() {
            // Show loading overlay
            document.getElementById('loadingOverlay').style.display = 'flex';
            
            // Simulate API call
            setTimeout(() => {
                // Hide loading
                document.getElementById('loadingOverlay').style.display = 'none';
                
                // Show success message
                showSuccessMessage();
                
                // Navigate back to invoice list after delay
                setTimeout(() => {
                    window.location.href = 'b2b-invoice.html';
                }, 3000);
            }, 2000);
        }

        function showSuccessMessage() {
            // Create success overlay
            const successOverlay = document.createElement('div');
            successOverlay.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
            successOverlay.innerHTML = `
                <div class="bg-white rounded-xl p-6 text-center max-w-xs mx-4">
                    <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-check text-green-600 text-2xl"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-800 mb-2">提交成功！</h3>
                    <p class="text-sm text-gray-600 mb-4">您的开票申请已提交，我们将在1-2小时内完成审核。</p>
                    <div class="bg-gray-50 rounded-lg p-3 mb-4">
                        <p class="text-xs text-gray-500 mb-1">申请编号</p>
                        <p class="text-sm font-mono font-medium">${submissionData.applicationId}</p>
                    </div>
                    <p class="text-xs text-gray-500">正在返回发票管理...</p>
                </div>
            `;
            document.body.appendChild(successOverlay);
            
            // Auto remove after showing
            setTimeout(() => {
                successOverlay.remove();
            }, 3000);
        }

        function showHelp() {
            alert('开票流程说明：\n\n1. 信息审核：我们将核实您提供的发票信息\n2. 开具发票：审核通过后立即开具发票\n3. 发送通知：通过邮件和短信发送发票\n\n如有疑问，请联系客服。');
        }

        function contactSupport() {
            showToast('正在为您接入专属客服...');
            // In a real app, this would open customer service
            setTimeout(() => {
                showToast('客服已接入，请在新窗口中咨询');
            }, 1500);
        }

        // Toast notification
        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg text-sm z-50';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 3000);
        }
    </script>
</body>
</html>